<template>
  <div class="alter-submit-container-padding">
    <topicSelect v-model="topicId" :type="5" has-project />
    <el-form
      ref="ruleFormRef"
      style="max-width: 800px; margin-top: 40px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      label-position="top"
    >
      <el-form-item label="（一）项目进展：" prop="progress">
        <el-input v-model="ruleForm.progress" type="textarea" />
      </el-form-item>
      <el-form-item label="（二）存在问题：" prop="error">
        <el-input v-model="ruleForm.error" type="textarea" />
      </el-form-item>
      <el-form-item label="（三）下步工作计划：" prop="nextPlan">
        <el-input v-model="ruleForm.nextPlan" type="textarea" />
      </el-form-item>
    </el-form>

    <commonFooterBar>
      <el-button :loading="loading" @click="submitForm(ruleFormRef)">
        保存为草稿
      </el-button>
      <el-button
        type="primary"
        :loading="loading"
        @click="submitForm(ruleFormRef, 2)"
      >
        确认提交
      </el-button>
    </commonFooterBar>
  </div>
</template>

<script setup>
  import topicSelect from '@/components/topicSelect.vue'
  import commonFooterBar from '@/components/commonFooterBar.vue'
  import {
    progressCreate,
    progressGet,
    progressUpdate,
  } from '@/api/project/course/progress'
  import { useCloseTabNavigate } from '@/utils/useCloseTabNavigate'
  import { postDraftBoxCreate } from '@/api/project/drafts'

  const { closeTabNavigate } = useCloseTabNavigate()

  const $baseMessage = inject('$baseMessage')

  const route = useRoute()

  const topicId = ref('')

  const loading = ref(false)

  const ruleFormRef = ref()
  const ruleForm = reactive({})
  const rules = reactive({
    progress: [
      {
        required: true,
        message: '请填写项目进度',
      },
    ],
    error: [
      {
        required: true,
        message: '请填写存在的问题',
      },
    ],
    nextPlan: [
      {
        required: true,
        message: '请填写下步工作计划',
      },
    ],
  })

  //初始化数据
  const initFormData = () => {
    if (!route.query.id) return
    progressGet({ id: route.query.id, getType: route.query.getType || 2 }).then(
      (res) => {
        if (res.code == 0 || res.code == 200) {
          const data = res.data || {}
          ruleForm.progress = data.progress
          ruleForm.error = data.error
          ruleForm.nextPlan = data.nextPlan
          topicId.value = data.topicId
        }
      }
    )
  }

  //表单提交
  const submitForm = async (formEl, type = 1) => {
    if (!formEl) return
    if (!topicId.value) {
      return $baseMessage('请先选择课题', 'error')
    }
    await formEl.validate((valid) => {
      if (valid) {
        const params = {
          ...ruleForm,
          topicId: topicId.value,
        }
        loading.value = true
        if (type == 2) {
          const api =
            route.query.id && route.query?.getType == 2
              ? progressUpdate
              : progressCreate
          if (route.query?.getType == 1) {
            params.draftBoxId = route.query.id
          }
          if (route.query?.getType == 2) {
            params.id = route.query.id
          }
          api(params)
            .then((res) => {
              if (res.code == 0 || res.code == 200) {
                $baseMessage('上报成功')
                closeTabNavigate()
              }
            })
            .finally(() => {
              loading.value = false
            })
        } else {
          const formData = {
            id: route.query?.getType == 1 ? route.query.id : '',
            type: 'KEY_PROJECT_PROGRESS',
            submitJson: JSON.stringify({
              ...params,
              draftBoxId: route.query?.getType == 1 ? route.query.id : '',
            }),
          }

          postDraftBoxCreate(formData)
            .then((res) => {
              if (res.code == 0 || res.code == 200) {
                $baseMessage('保存草稿成功')
                closeTabNavigate()
              }
            })
            .finally(() => {
              loading.value = false
            })
        }
      }
    })
  }

  onMounted(() => {
    route.query.id && initFormData()
  })
</script>

<style lang="scss" scoped>
  .alter-submit-container-padding {
    padding-bottom: 80px !important;
  }
</style>
